<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getData()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  :data="recommendData"   >
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="title" label="标题"  >
            </el-table-column>
            <el-table-column prop="titleUg" label="标题(Ug)" >
            </el-table-column>
            <el-table-column prop="type" label="类型" width="220"  :formatter="typeFormat" ></el-table-column>
            <el-table-column prop="actions" label="操作"  width="300"  >
                <template slot-scope="scope" >
                    <el-button type="success" size="small" @click="handleGoods(scope.$index, scope.row)">商品管理</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="formTitle" v-model="formVisible" :close-on-click-modal="false">
            <el-form :model="form" label-width="120px"  ref="form" :rules="formRules" >
                <el-row >
                    <el-col :span="10" >
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" >
                        <el-form-item label="标题(UG)" prop="title">
                            <el-input v-model="form.titleUg" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="所属分类" prop="parentId" >
                    <template>
                        <el-select v-model="form.type" filterable placeholder="请选择所属分类">
                            <el-option
                                    v-for="item in parentOptions"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="背景图" prop="background" >
                    <el-upload
                            action="/admin/banner/upload"
                            :on-success="onUploadSuccess"
                            list-type="picture-card"
                            :file-list="fileList"
                    >
                        <i class="el-icon-upload" ></i>
                    </el-upload>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submit" :loading="loading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="推荐商品设置" v-model="recVisible" style="width: 100%"  >
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="设置推荐" name="1">
                    <el-row>
                        <el-form :inline="true" :model="searchModel">
                            <el-form-item>
                                <el-input v-model="searchModel.keyword" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="search()">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-row>
                        <el-table :data="searchData" >
                            <el-table-column label="商品名称" prop="title"  ></el-table-column>
                            <el-table-column label="商品主图(Ug)" prop="titleUg"  ></el-table-column>
                            <el-table-column label="商品主图" prop="thumb"  >
                                <template   slot-scope="scope">
                                    <img :src="renderImage(scope.row.thumb)" height="45" style="margin-top: 3px" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" prop="action"  >
                                <template slot-scope="scope" >
                                    <el-button type="success" size="small" @click="recommendAction(scope.$index, scope.row)">推荐</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="已选商品" name="2">
                    <el-table :data="goodsData" >
                        <el-table-column label="商品名称" prop="title"  ></el-table-column>
                        <el-table-column label="商品名称(Ug)" prop="titleUg"  ></el-table-column>
                        <el-table-column label="商品主图" prop="thumb"  >
                            <template   slot-scope="scope">
                                <img :src="renderImage(scope.row.thumb)" height="45" style="margin-top: 3px" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" prop="action"  >
                            <template slot-scope="scope" >
                                <el-button type="danger" size="small" @click="recommendCancel(scope.$index, scope.row)">取消推荐</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>

    </section>
</template>
<script>
    import {getRecommendData,saveRecommendData,deleteRecommendApi,searchGoods,setRecommendGoods,getRecommendGoods,cancelRecommendGoods} from  "../../api/api";
    export default {
        data(){
            return {
                listLoading:false,
                sels:'',
                filters:{
                    title:''
                },
                recommendData:[],
                form:{
                    title:'',
                    titleUg:'',
                    type:0,
                    background:'',
                    status:0
                },
                formVisible:false,
                formTitle:'',
                loading:false,
                parentOptions:[
                    {id:0,title:'请选择类型'},
                    {id:1,title:'新品'},
                    {id:2,title:'猜你喜欢'}
                ],
                fileList:[],
                formRules:{
                    title:[
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ]
                },
                activeNames:"2",
                recVisible:false,
                searchModel:{
                    keyword:''
                },
                currentRecommendId:0,
                searchData:[],
                goodsData:[],
                searchLoading:false
            }
        },
        mounted(){
            this.getData()
        },
        methods:{
            handleGoods(index,row){
                let that = this;
                this.recVisible = true
                this.activeNames = "2"
                this.currentRecommendId = row.id
                getRecommendGoods({recommendId: row.id}).then(resp=>{
                    if(resp.data.code == 200){
                        that.goodsData = resp.data.data
                    }
                })
            },

            handleChange(){

            },

            search(){
                let that = this
                if(!that.searchModel.keyword){
                    that.$message({
                        type:'error',
                        message:'请输入关键词'
                    })
                    return false;
                }
                this.searchLoading = true
                searchGoods({keyword:this.searchModel.keyword,recommendId: that.currentRecommendId}).then(resp=>{
                    that.searchLoading = false
                    if(resp.data.code==200){
                        that.searchData = resp.data.data
                    }
                })
            },

            recommendAction(index,row){
                let that = this;
                setRecommendGoods({
                    recId:that.currentRecommendId,
                    goodsId:row.id
                }).then(resp=>{
                    if(resp.code == 200){
                        row.recommendGoodsId = resp.data
                        that.goodsData.push(row)
                        that.searchData.splice(index,1)
                    }
                })
            },
            recommendCancel(index,row){
                let that = this;
                cancelRecommendGoods({recGoodsId:row.recommendGoodsId}).then(resp=>{
                    console.log(resp,'dd')
                    if(resp.data.code == 200){
                        that.goodsData.splice(index,1)
                    }
                })
            },

            selsChange(sels){
                this.sels = sels;
            },
            getData(){
                let _this = this
                getRecommendData().then(res=>{
                    let result =  res.data;
                    if(result.code == 200){
                        let data = res.data.data;
                        _this.recommendData = data;
                        _this.listLoading = false;
                    } else{
                        _this.$message({
                            type:'error',
                            message:'请求失败'
                        })
                    }
                })
            },
            handleAdd(){
                this.formVisible = true
                this.formTitle = '新增'
                this.form.id = null
                this.form.title = ''
                this.form.titleUg = ''
                this.form.type = 0
                this.form.background = ''
                this.form.status = 1
                this.fileList = []
            },
            handleEdit(index,row){
                this.formVisible = true
                this.formTitle = '编辑'
                this.form.id = row.id
                this.form.title = row.title
                this.form.titleUg = row.titleUg
                this.form.type = row.type
                this.form.background = row.background
                this.form.status = row.status
                this.fileList = [{url:this.imageService + row.background}]
            },

            handleDel(index,row){
                this.$confirm('确认删除该分类吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { id: row.id };
                    deleteRecommendApi(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getData();
                    });
                }).catch(() => {

                });
            },
            submit(){
                let _this = this;
                this.$refs.form.validate((valid) => {
                    if(valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.loading = true;
                            saveRecommendData(_this.form).then(res=>{
                                if(res.code == 200){
                                    _this.loading = false;
                                    _this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    _this.$refs['form'].resetFields();
                                    _this.formVisible = false;
                                    _this.getData();
                                }else{
                                    _this.$message({
                                        type: 'error',
                                        message: res.msg
                                    })
                                }
                            })
                        })
                    }
                })
            },
            onUploadSuccess(res,file){
                this.form.background = res.data.path
            },
            typeFormat(row){
                let types = ['未知','新品','猜你喜欢']
                return types[row.type]
            },
            renderImage(url){
                return this.imageService + url
            }
        }
    }
</script>
